﻿<script src="~/Scripts/AdminControllers/OrganizationJobtitleController.js"></script>
<div class="row" ng-controller="OrganizationJobtitleController">
    <div class="search-bar collapsed">
        <div class="form-group">
            <div class="input-group input-group-lg">
                <input type="text" class="form-control" placeholder="Type to search..." ng-model="searchkey" ng-change="Search()">
                <span class="input-group-btn">
                    <button class="btn btn-square btn-lg btn-default no-shadow close-search-bar" type="button" ng-click="searchkey='';Search();"><i class="zmdi zmdi-close"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-12">
    <div class="wrapper container-fluid" style="padding: 0px;">
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="bg-success bs-0 mb-20 clearfix">
                    <div class="pull-left bg-op p-15 text-center">
                        <div class="easy-pie-chart fs-30" data-percent="10" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                            <i class="fa fa-user"></i>
                        </div>
                    </div>
                    <div class="pull-left p-20">
                        <h5 class="m-0 fs-16 text-uppercase lh-1">Total Churches/Un Assigned Churches</h5>
                        <span class="fw-600 fs-30">1/10</span>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="bg-green bs-0 mb-20 clearfix">
                    <div class="pull-left bg-op p-15 text-center">
                        <div class="easy-pie-chart fs-30" data-percent="30" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                            <i class="fa fa-users"></i>
                        </div>
                    </div>
                    <div class="pull-left p-20">
                        <h5 class="m-0 fs-16 text-uppercase lh-1">Total Church Workers/Un Assigned Church Workers </h5>
                        <span class="fw-600 fs-30">12/1</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
    <div class="clearfix"></div>
    <div class="col-md-12">
        <div class="bg-white bs-0 mb-20 widget">
            <div class="custom-grid-header">
                <div class="custom-grid-name">
                    Organization Jobtitles
                </div>
                <div class="custom-grid-menu">
                    <ul class="custom-grid-menu-ul pull-right">
                        <li class="custom-grid-menu-ul-li">
                            <a href="../OrganizationMaster" class="text-white"><i class="zmdi zmdi-tag-backspace"></i></a>
                        </li>
                        <li class="custom-grid-menu-ul-li" ng-click="toggle('add','')">
                            <a href="javascript:;" class="text-white"><i class="fa fa-plus-circle"></i></a>
                        </li>
                        <li class="custom-grid-menu-ul-li dropdown">
                            <a href="javascript:;" class="dropdown-toggle text-white"><i class="zmdi zmdi-sort"></i></a>
                            <ul class="dropdown-menu dropdown-menu-right animated flipInY" style="margin-top: 4px; padding: 0px; width: 220PX;">
                                <li class="sortmenu" ng-click="sortby='DEFAULT';sort()" ng-class="{sortactive:sortby=='DEFAULT'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Default</div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="sortmenu" ng-click="sortby='MINITRYTYPE';sort()" ng-class="{sortactive:sortby=='MINITRYTYPE'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Miniterial Type</div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="sortmenu" ng-click="sortby='JOBTITLE';sort()" ng-class="{sortactive:sortby=='JOBTITLE'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Job Title</div>
                                    <div class="clearfix"></div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="widget-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <th style="width: 15%">Name</th>
                                <th style="width: 15%">Church Name</th>
                                <th style="width: 15%">Jobtitle Name</th>
                                <th style="width: 15%">Organization Zone</th>
                                <th style="width: 15%">Date Of Ordination</th>
                                <th style="width: 10%">Status</th>
                                <th style="width: 25%">ACTION&nbsp;</th>
                            </thead>
                            <tbody>
                                <tr ng-repeat="data in list">
                                    <td>{{data.ChurchWorker.FullName}}</td>
                                    <td>{{data.Church.ChurchName}}</td>
                                    <td>{{data.Jobtitle.JobTitleName}}</td>
                                    <td>{{data.OrganizationPartition.PartitionName}}</td>
                                    <td>{{data.DateOfOrdination}}</td>
                                    <td>{{data.ChurchWorkerStatus.ChurchWorkerStatusName}}</td>
                                    <td>
                                        <div class="btn-group-sm" role="group" aria-label="Second group">
                                            <button type="button" class="btn btn-info waves-effect" ng-click="toggle('edit',data.ChurchWorkerJobtitleId);"><i class="fa fa-pencil"></i></button>
                                            <button type="button" class="btn btn-danger waves-effect" ng-click="delete(data.JobTitleName,data.ChurchWorkerJobtitleId)"><i class="fa fa-trash"></i></button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div gridloader></div>
                    <div nodata></div>
                </div>
                <div ng-show="list.length > 0" style="padding-right: 10px; text-align: right;">
                    <div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="Jobtitle" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{title}}</h4>
                </div>
                <form name="fromvalidate" novalidate>
                    <div class="modal-body">
                        <div class="form-group">
                            Church Worker
                            <select ng-model="Jobtitle.ChurchWorkerId" ng-options="obj.ChurchWorkerId as obj.FullName for obj in Churchworkers" class="form-control" ng-required="true"></select>
                        </div>
                        <div class="form-group">
                            Miniterial Type
                            <select ng-model="Jobtitle.MiniterialType" ng-options="obj.Departmentsid as obj.DepartmentName for obj in minitrialtype " class="form-control" ng-required="true"></select>
                        </div>
                        <div class="form-group">
                            Job title
                            <select ng-model="Jobtitle.JobTitleId" ng-options="obj.JobTitleId as obj.JobTitleName for obj in Jobtitles" class="form-control" ng-required="true"></select>
                        </div>
                        <div class="form-group">
                            Organization Zone
                            <select ng-model="Jobtitle.PartitionId" ng-options="obj.PartitionId as obj.PartitionName for obj in Zones" class="form-control" ng-required="true"></select>
                        </div>
                        <div class="form-group">
                            Church
                            <select ng-model="Jobtitle.ChurchId" ng-options="obj.CHChurchid as obj.ChurchName for obj in Churches" class="form-control" ng-required="true"></select>
                        </div>
                        <div class="form-group">
                            Date Of Ordination
                            <input type="text" class="form-control" calendar ng-model="Jobtitle.DateOfOrdination">
                        </div>
                        <div class="form-group">
                            Current Status
                            <select ng-model="Jobtitle.CurrentStatus" ng-options="obj.ChurchWorkerStatusId as obj.ChurchWorkerStatusName for obj in ChurchworkerStatus " class="form-control" ng-required="true"></select>
                        </div>
                        <div class="form-group">
                            Remarks
                            <textarea class="form-control" ng-model="Jobtitle.Remarks" rows="6"></textarea>
                        </div>
                        <div class="form-group">
                            <input type="checkbox" ng-model="Jobtitle.ChurchWorker.CreateLogin" />
                            Create Login
                        </div>
                        <div class="form-group">
                            Email
                            <input type="text" class="form-control" ng-model="Jobtitle.ChurchWorker.Email" ng-required="Jobtitle.ChurchWorker.CreateLogin" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || buttonstate" ng-click="save(modelstate);">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

